<script setup lang="ts">
import { getTwitter } from "@/api";
import { Twitter } from "@/api/type";
import {onMounted, ref} from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { FreeMode, Navigation, Pagination, Autoplay } from "swiper";

console.log("index");
const data = ref<Twitter[]>([]);
getTwitter().then((res) => {
  console.log(res);
  data.value = res.lists as unknown as Twitter[];
});
let timer: string | number | NodeJS.Timer | undefined
onMounted(()=>{
  timer= setInterval(()=>{
    getTwitter().then((res) => {
      console.log(res);
      data.value = res.lists as unknown as Twitter[];
    });
  },1000*60)
})
onMounted(()=>{
  clearInterval(timer)
})
function CheckImgExists(imgurl:string) {
     var ImgObj = new Image(); //判断图片是否存在  
     ImgObj.src = imgurl;  
     //存在图片
     if ((ImgObj.width > 0 && ImgObj.height > 0)) {  
          return true;
     } else {  
          return false;
      }   
}

/**
 * 计算字体大小
 * @param imgurl 图片地址
 * @param content 内容
 * @param isTitle 是否标题
 */
const fontSizeCompute=(imgurl:string,content:string,isTitle:boolean)=>{
  //100内 3xl 200内2xl 300内xl 400内lg 500内base 600内md 700内sm 700外xs
  //获取长度
  let fontSize = content.length
  //如果有图片从2xl开始计算
  if(CheckImgExists(imgurl)) {
    fontSize+=200
  }
  if(fontSize<100){
    return !isTitle?"text-6xl":'text-5xl'
  }else if(fontSize<200){
    return !isTitle?"text-5xl":'text-4xl'
  }else if(fontSize<300){
    return !isTitle?"text-4xl":'text-3xl'
  }else if(fontSize<400){
    return !isTitle?"text-3xl":'text-2xl'
  }else if(fontSize<500){
    return !isTitle?"text-2xl":'text-xl'
  }else if(fontSize<600){
    return !isTitle?"text-xl":'text-lg'
  }else if(fontSize<700){
    return !isTitle?"text-lg":'text-base'
  }else{
    return !isTitle?"text-base":'text-sm'
  }
}
</script>

<template>
  <div class="">
    <Swiper
      :modules="[FreeMode, Navigation, Autoplay,Pagination]"
      :pagination="{ clickable: true }"
      :loop="true"
      :spaceBetween="10"
      :navigation="true"
      :autoplay="{
        delay: 10000,
        disableOnInteraction: false,
      }"
      class="full-slider h-screen"
    >
      <SwiperSlide v-for="(item, index) in data" :key="index">
        <div
          class="h-screen flex p-2 items-center justify-center"
        >
          <div
            class="xl:max-w-7xl gap-6 lg:max-w-5xl lg:p-10 sm:p-5 grid grid-cols-12 gap-1 dark:text-white  rounded-lg"
          >
            <div class="lg:col-span-12 grid grid-cols-12" :class="CheckImgExists(item.cont_img)?'col-span-6':'col-span-12'">
              <div v-if="CheckImgExists(item.logo)" class="lg:col-span-1 md:col-span-2 flex items-center justify-center">
                <img
                  :src="item.logo"
                  class="lg:w-3/5 md:w-3/6 sm:w-full object-cover rounded-full"
                  style="aspect-ratio: 1/1"
                />
              </div>
              <div
                :class="' col-span-3 flex items-center '+fontSizeCompute(item.cont_img,item
                .content,true)"
              >
                {{ item.name }}
              </div>
              <div
                  style="white-space: pre-wrap"
                :class="'col-span-12 lg:line-clamp-15  sm:line-clamp-10 my-2 lg:'+fontSizeCompute(item.cont_img,item.content,false)+' sm:'+fontSizeCompute(item.cont_img,item.content,false)"
              >
                {{ item.content }}
              </div>
            </div>
            <div
              :class="'lg:col-span-6 col-span-6 sm:p-10 md:p-0 flex items-center justify-center '"
              v-if="CheckImgExists(item.cont_img)"
              style="white-space: pre-wrap"
            >
              <img :src="item.cont_img" class="w-full h-full rounded-md object-cover" />
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>
